<template>
	<view class="content" style="height: 100%;"
		:style="'background: url('+ c_imgPath + 'shouye/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">
		<!-- 头部 -->
		<view class="header" v-if="goods"
			:style="'background: url('+ goods.imgurl_detail + ') repeat 0 0 / 100% auto;'">
			<view class="head">
				<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
				<view class="header_title">
					<view @click="back()">
						<image :src="i_imgPath + 'back.png'"></image>返回
					</view>
					<view class="hang1">{{goods.title}} </view>
				</view>
			</view>
			<view class=" header_news">
				<view class="header_news_a">
					<image :src="c_imgPath + 'detail/gmsm.png'" @click="$refs.shuoming.open()"></image>
					<image :src="c_imgPath + 'detail/zjjl.png'" @click="getlist(1)" v-if="show == 0"></image>
					<image :src="c_imgPath + 'detail/zsgl.png'" @click="getlist(0)" v-if="show == 1"></image>
				</view>
				<view class="header_news_t"
					:style="'background: url('+ c_imgPath + 'detail/good_bg.png' + ') repeat  0 0 / 100% 100%'">
					<view class="header_news_t_price">
						<view>{{goods.price}}<text>{{goods.type==5?'积分':'元'}}</text></view>
					</view>
					<view class="more">/张 明信片</view>
					<view class="riqi" style="flex: 1;">
						<view v-if="goods.addtime"></view>
						<view v-if="goods.addtime">{{goods.addtime}}</view>
					</view>
					<view class="shoucang" @click="sc_collect()" style="margin-right: 50rpx;">
						<view class="shoucang_img">
							<image :src="c_imgPath + 'detail/shoucang_sel.png?1'" v-if="goods.collection_is==1"></image>
							<image :src="c_imgPath + 'detail/shoucang.png?1'" v-else></image>
						</view>
						<!-- <view class="shoucang_text">{{goods.collection_is==1?'已':''}}收藏</view> -->
					</view>
				</view>
			</view>
			<view class="redu_box" style="margin-top: 480rpx;">
				<view class="redu" v-if="goods.join_user && goods.join_user.length>0">
					<image :src="item" v-for="(item,index) in goods.join_user" :key="index" v-if="index<5"
						:style="'transform:translateX('+-index*20+'rpx'+')'"> </image>
				</view>
				<view class="redu" v-else style="line-height: 46rpx;">
					暂无热度
				</view>
				<view class="redu_right">当前热度</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<!-- 走马灯 -->
			<view class="zmd" v-if="order_list && order_list.length>0"
				:style="'background: url('+ c_imgPath + 'detail/zmd_bg1.png'+ ') repeat-y 0 0 / 100% 100%;'">
				<gbro-marquee broadcastType='mould' direction="left" :viewHeight="172" :touchEvent="true"
					:doamin='doamin' :broadcastStyle='broadcastStyle2' style="width: 100%;">
					<block v-for="c in 2" :key="c">
						<view v-for="(item,index) in order_list" :key="index" class="lunbo">
							<image :src="item.goodslist_imgurl"></image>
							<view class="lunbo_r">
								<view class="lunbo_r_title">{{item.goodslist_title}}</view>
								<view class="hang1">打开 {{goods.title}} 获得</view>
								<view class="flex_center hang1">
									<image :src="item.user_info.headimg"></image>
									<view>{{item.user_info.nickname}}</view>
								</view>
							</view>
						</view>
					</block>
				</gbro-marquee>
			</view>

			<!-- 切换 -->
			<!-- <view class="qiehuan">
				<view @click="getlist(i)" v-for="(v,i) in list" :key="i">
					<view :class="show==i?'xzs':'wzs'">{{v.name}}</view>
					<view class="qiehuan_line" v-if="show==i">
						<image src="../../static/yfs/tab_sel.png"></image>
					</view>
				</view>
			</view> -->

			<!-- 赏池预览 -->
			<view class="spbox" v-if="show == 0 && shang_list.length>0"
				:style="order_list.length>0?'':'margin-top:588rpx'">
				<view class="sp" v-for="(item,index) in shang_list" :key="index">
					<view class="sp_head hang1 flex_center">
						<view class="sp_shang" :style="'color:'+ item.shang_color">
							<image :src="item.shang_imgurl+'?1'"></image>
							<text>{{item.shang_title}}</text>
						</view>
						<text style="font-size: 24rpx;color: #FFFFFF;">{{item.pro}}</text>
						<text style="font-size: 20rpx;color: rgba(255, 255, 255, 0.6);">（各类别赏中赏概率不代表具体产品中赏概率）</text>
					</view>
					<view class="spt">
						<view v-for="(v,i) in item.goods_list" :key="i" @click="yulan(item,i)">
							<view class="list_img">
								<image class="imgs" :src="v.imgurl"></image>
							</view>
							<view class="sangs hang1">{{v.title}}</view>
							<view class="" style="font-size: 20rpx;color: rgba(255, 255, 255, 0.6);">
								参考价:￥{{v.price}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 中赏记录 -->
			<view class="jilv" v-if="show == 1 && shang_cate.length>0"
				:style="order_list.length>0?'':'margin-top:588rpx'">
				<view class="jilv_title">
					<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.shang_id)"
						:class="shang_id==item.shang_id?'jilv_title_sel':'jilv_title_view'">{{item.shang_title}}
					</view>
				</view>
				<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_con">
					<view class="jilv_list"
						:style="'background: url('+ c_imgPath + 'detail/jl_bg.png'+ ') repeat-y 0 0 / 100% 100%;'">
						<view class="jilv_list_l">
							<image :src="item.goodslist_imgurl"></image>
							<text :style="'color:'+ item.shang_color">{{item.shang_title}}</text>
							<view class="hang1">{{item.goodslist_title}}</view>
						</view>
						<view class="flex_center " style="flex: 3;">
							<image :src="item.headimg" class="headimg"></image>
							<view class="hang1" style="width: 110rpx;">{{item.nickname}}</view>
						</view>
					</view>
					<view class="jilv_list_b">
						<image :src="c_imgPath + 'detail/fashu.png'"></image>
						<text>×{{item.luck_no}}发</text>
					</view>
				</view>

			</view>

		</mescroll-body>

		<!-- 抽奖按钮 -->
		<view class="bar_box">
			<view @click="choujiang(1)"
				:style="'background: url(' + c_imgPath +'shouye/fa1.png'+') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(5)"
				:style="'background: url(' + c_imgPath + 'shouye/fa5.png'+') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(10)"
				:style="'background: url(' +c_imgPath +'shouye/fa10.png'+') no-repeat 0 0 / 100% 100%;'">
			</view>
			<view @click="choujiang(50)"
				:style="'background: url(' +c_imgPath +'shouye/fa50.png'+') no-repeat 0 0 / 100% 100%;'">
			</view>
		</view>

		<!-- 刷新浮框 -->
		<view class="xuanfu">
			<button open-type="share">
				<image :src="c_imgPath + 'detail/fenxiang.png'"></image>
			</button>
			<image :src="c_imgPath + 'detail/bangdan.png'" @click="gotoPage('/pages/shouye/bangdan')"></image>
			<image :src="c_imgPath + 'detail/shuaxin.png'" @click="getlist(show)"></image>
			<button open-type="contact" class="contact">
				<image :src="c_imgPath + 'detail/kefu.png'"></image>
			</button>
			<!-- <image :src="z_imgPath + 'wuxianling.png'" @click="gotoPage('/pages/shouye/wxl')"></image> -->
		</view>

		<!-- 购买说明 -->
		<!-- 购买说明 -->
		<uni-popup ref="shuoming" type="center">
			<view class=" shuomingOrder"
				:style="'background: url('+ c_imgPath + 'detail/gmsm_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<!-- <view class="order_title">
					<image :src="c_imgPath + 'detail/gmsm_p.png'"></image>
					<view class="ca" @click="$refs.shuoming.close()">×</view>
				</view> -->
				<view class="pop_title">购买说明</view>
				<view class="pop_con">
					<scroll-view scroll-y="true" style="max-height: 530rpx;">
						<view v-html="news"></view>
					</scroll-view>
				</view>
			</view>
			<view class="shuoming_close" @click="$refs.shuoming.close()">
				<image :src="c_imgPath + 'detail/close.png'"></image>
			</view>
		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="order_show" type="bottom" :isMaskClick="false">
			<view class="order animated fadeInUp">
				<view class="order_title jilvOrderTitle"
					:style="'background: url('+ c_imgPath + 'detail/payTop.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jilvOrderTitle_text">确认订单</view>
					<view class="ca" @click="$refs.order_show.close()">×</view>
				</view>
				<view class="order_title_con1">
					<view class="order_pic" v-if="pay_news.goods">
						<view class="order_pic_img">
							<image :src="pay_news.goods.imgurl_detail"></image>
						</view>
						<view>
							<view style="font-size: 35rpx;">{{pay_news.goods.title}}</view>
							<view style="margin-top: 40rpx;">类型：明信片</view>
							<view style="margin-top: 10rpx;">
								<text>单价：<text style="color: ;">{{pay_news.goods.price}}元</text></text>
								<text>×{{pay_news.goods.prize_num}}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx;" v-if="pay_news.goods">明信片×{{pay_news.goods.prize_num}}</view>
						<view>
							小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1">
					<view class="order_coupon" @click="selectCoupon">
						<view class="coupon_text">优惠券</view>
						<view class="coupon_money">{{!coupon_info_s ? '暂无可用优惠券':'-￥'+coupon_info_s.money}}</view>
					</view>
				</view>
				<view class="order_title_con1" v-if="pay_news.is_show == 1 && goods.box_type!=1">
					<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
					<view class="fangshi" @click="change_yuan_index(1)" v-if="goods.type != 3">
						<view class="flex_center">
							<image :src="c_imgPath+'detail/yue.png'"></image>
							<view>
								使用赏币抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
							</view>
						</view>
						<image :src="c_imgPath + 'detail/yuan'+ (bi?'_sel':'') +'.png'"></image>
					</view>
					<view class="fangshi" @click="change_yuan_index(2)" v-if="pay_news.money > 0">
						<view class="flex_center">
							<image :src="c_imgPath + 'detail/yue_sel.png'"></image>
							<view>
								使用余额抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
							</view>
						</view>
						<image :src="c_imgPath + 'detail/yuan'+ (yue?'_sel':'') +'.png'"></image>
					</view>
				</view>
				<view style="font-size: 24rpx;" class="order_desc" @click="is_xy = !is_xy">
					<image :src="c_imgPath + 'detail/yuan'+ (is_xy?'_sel':'') +'.png'"></image>
					下单购买即表示同意
					<text style="color: #B07CDD;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:{{goods.box_type==5?'':'￥'}}<text
							style="font-size: 40rpx;">{{pay_news.price}}{{goods.box_type==5?'积分':''}}</text>
					</view>
					<view class="zhifu" @click="pay()"
						:style="'background: url('+ c_imgPath + 'detail/cj_btn.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>确定支付</text>
					</view>
				</view>
				<view class="order_bottom"></view>
			</view>
		</uni-popup>

		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="pop_jp">
				<image class="pop_gongxi" :src="c_imgPath + 'detail/jp_img.png'"></image>
				<!-- <view class="jp_headimg">
					<image :src="jp_news.headimg"></image>
				</view>
				<view class="jp_name">{{jp_news.nickname}}</view> -->
				<view class="jp_title animated zoomIn"
					:style="'background: url('+ c_imgPath + 'detail/jp_bg5.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jp_title_1">
						<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'>
							<view class="list_img"
								:style="'background: url('+ c_imgPath + 'detail/jp_img_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
								<image :src="v.goodslist_imgurl"></image>
								<view class="list_img_shang">
									<text>{{v.shang_title}} ×1</text>
								</view>
							</view>
							<view class="hang1 list_title" style="margin-top: 10rpx;">{{v.goodslist_title}}</view>
						</view>
					</view>
				</view>
				<view class="jp_btn">
					<view class="animated fadeInLeft jp_btn_text" @click="tosangdai()"
						:style="'background: url('+ c_imgPath + 'detail/cj_btn.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<text>去赏袋</text>
					</view>
					<view class="animated fadeInRight" @click="$refs.jp_show.close()"
						:style="'background: url('+ c_imgPath + 'detail/cj_btn.png'+ ') no-repeat 0 0 / 100% 100%;'">
						继续抽
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 预览 -->
		<uni-popup ref="yulanPop" type="center" mask-background-color="rgba(0,0,0,.95)">
			<swiper :indicator-dots="true" :autoplay="false" :duration="500" :current="current_index"
				style="width: 540rpx;height: 1000rpx;">
				<swiper-item v-for="(v,i) in yulanList" :key="i">
					<view class="yulanStyle"
						:style="'background: url('+ c_imgPath + 'detail/ylBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<view class="yulanStyle_title">
							<text>{{v.shang_title}}</text>
						</view>
						<view>
							<image style="width: 466rpx;height: 654rpx;" :src=" v.imgurl" mode="widthFix"></image>
						</view>
					</view>
					<view class="hang1 bomText"
						style="margin-top: 100rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						{{v.title}}
					</view>
					<view class="hang1 bomText"
						style="margin-top: 30rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						参考价格:￥{{v.price}}
					</view>
					<view class="shuoming_close" @click="$refs.yulanPop.close()">
						<image :src="c_imgPath + 'detail/close.png'"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-popup>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="coupon" type="center" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon">
				<view class="coupon_img">
					<image :src="u_imgPath + 'mine/coupon_img.png'"></image>
				</view>
				<view class="coupon_btn" @click="receive_coupon">
					<image :src="u_imgPath + 'mine/coupon_btn.png'"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="coupon_info" type="center" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon">
				<view class="coupon_title">
					<image :src="c_imgPath + 'detail/jp_img.png'"></image>
				</view>
				<view class="coupon_box"
					:style="'background: url('+ c_imgPath + 'detail/jp_bg5.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="coupon_box_item"
						:style="'background: url('+ c_imgPath + 'mine/coupon_bg.png'+ ') repeat-y 0 0 / 100% 100%;'">
						<view class="item_box">
							<view class="item_left">
								<view class="left_num">￥<text>{{coupon_info.money}}</text></view>
								<view class="left_text">满{{coupon_info.out_money}}减</view>
							</view>
							<view class="xian"></view>
							<view class="item_center">
								<view class="center_title hang2">{{coupon_info.goods_title}}</view>
								<!-- {{item.title}} -->
								<view class="center_time"><text>{{coupon_info.title}}</text>
									有效期至{{coupon_info.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="coupon_btn" @click="$refs.coupon_info.close()">
					<image :src="u_imgPath + 'mine/coupon_btn2.png'"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="coupon_list" type="bottom" mask-background-color="rgba(0,0,0,.8)">
			<view class="coupon bomList">
				<view class="coupon_list_title"
					:style="'background: url('+ c_imgPath + 'detail/jilv_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<!-- <image :src="z_imgPath + 'detail/jilv_p.png'"></image> -->
					<view class="jilvOrderTitle_text">优惠券</view>
					<view class="ca" @click="$refs.coupon_list.close()">×</view>
				</view>
				<view class="coupon_list" style="max-height:900rpx;">
					<scroll-view scroll-y="true" style="max-height:900rpx;">
						<view class="item" @click="selectCouponItem(item)"
							:style="'background: url('+ c_imgPath + 'mine/coupon_bg.png'+ ') repeat-y 0 0 / 100% 100%;'"
							v-for="(item,index) in coupon_list" :key="index">
							<view class="item_box">
								<view class="item_left">
									<view class="left_num">￥<text>{{item.money}}</text></view>
									<view class="left_text">满{{item.out_money}}减</view>
								</view>
								<view class="xian"></view>
								<view class="item_center">
									<view class="center_title hang2">{{item.goods_title}}</view>
									<!-- {{item.title}} -->
									<view class="center_time"><text>{{item.title}}</text> 有效期至{{item.end_time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
	export default {
		components: {
			gbroMarquee
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'shouye/wuxian/',
				i_imgPath: this.$z_img + 'shouye/',
				c_imgPath: 'https://qt.yhemall.com/',
				u_imgPath: '/static/',
				downOption: {
					auto: false
				},
				broadcastStyle2: {
					speed: 100,
				},
				// 延时动画
				doamin: false,
				list: [{
					name: '赏池预览'
				}, {
					name: '中赏记录'
				}],
				// 商品id
				goods_id: '',
				show: 0,
				// 赏池
				goods: {},
				order_list: [],
				shang_list: [],
				// 中赏记录
				shang_id: 0,
				/* 默认 超神*/
				shang_cate: [],
				jl_Arr: [],

				type: "",
				pay_news: {},
				prize_num: "",


				// 是否显示订单弹窗
				order_show: false,

				bi: true,
				yue: true,
				is_xy: false,
				num: 1,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,

				jp_news: {},
				jp_arr: [],
				news: '',
				// 支付失效
				pay_status: false,
				// 动画
				rollTimer: null, //动画定时器句柄
				moveCss: [], //奖励滚动组件的滑动的动画效果css
				luckyNums: 0, //中奖位置
				luckydata: [], //中奖位置数组
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				items: [], //滚动的卡片列表
				awardItem: [], //中奖道具
				left_px: '',
				tiaotype: 1,

				current_index: 0,
				yulanList: [], //预览数组

				coupon_info: '', //领取优惠券详情
				coupon_list: [], //可用优惠券列表
				coupon_info_s: '', //已选择优惠券详情


			}
		},
		onShareAppMessage(e) {
			let that = this;
			return {
				title: "乐掏" + that.goods.title + '系列',
				imageUrl: that.goods.imgurl_detail,
				path: "/pages/shouye/detail_wuxian?goods_id=" + that.goods_id + '&pid=' + uni.getStorageSync(
					'userinfo').ID + '&from=' + uni.getStorageSync('userinfo').from
			};
		},
		onLoad(e) {
			this.goods_id = e.goods_id ? e.goods_id : '';
			setTimeout(() => {
				this.doamin = true
			}, 1000)
			this.getDanye(4)
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
		},
		watch: {
			jp_arr() {
				for (let i = 0; i < this.jp_arr.length; i++) {
					if (this.jp_arr[i].kaiqi) {
						if (this.jp_arr.length - 1 == i) {
							this.is_tiaoguo = false
							return
						}
					} else {
						this.is_tiaoguo = true
						return
					}
				}
			}
		},

		methods: {
			//优惠券
			selectCouponItem(item) {
				this.coupon_info_s = item;
				this.$refs.coupon_list.close();
				this.order_money();
			},
			selectCoupon() {
				if (this.coupon_list.length >= 1) {
					this.$refs.coupon_list.open();
				}
			},
			receive_coupon() {
				let that = this;
				that.req({
					url: 'receive_coupon',
					data: {
						goods_id: that.goods_id,
					},
					success(res) {
						if (res.status == 1) {
							uni.showToast({
								title: '领取成功',
								icon: 'success'
							})
							that.coupon_info = res.data;
							that.$refs.coupon.close();
							that.$refs.coupon_info.open();
						} else {
							that.$refs.coupon.close();
						}
					}
				})
			},

			//预览
			yulan(e, a) {
				this.current_index = a;
				this.$refs.yulanPop.open();
				console.log(e);
				this.yulanList = e.goods_list;
			},
			back() {
				var pages = getCurrentPages();
				// console.log(pages)

				if (pages.length == 1 && pages[0].route == "pages/shouye/detail_wuxian") {
					uni.switchTab({
						url: '/pages/shouye/index'
					})
				} else {
					uni.navigateBack()
				}

			},
			tokefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			getDanye(e) {
				let that = this;
				that.req({
					url: 'danye',
					data: {
						type: e
					},
					success(res) {
						if (res.status == 1) {
							that.news = res.data
						}
					}
				})
			},

			sc_collect() {
				let that = this;
				that.req({
					url: 'addCollect',
					data: {
						goods_id: that.goods.id
					},
					success(res) {
						if (res.status == 1) {
							if (that.goods.collection_is == 1) {
								that.goods.collection_is = 0
							} else {
								that.goods.collection_is = 1
							}
						}
					}
				})
			},

			getlist(v) {
				this.show = v
				this.mescroll.resetUpScroll(false)
			},

			tosangdai() {
				uni.setStorageSync('page', this.$mp.page.route)
				uni.switchTab({
					url: '../sangdai/sangdai'
				})
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				this.order_money()
			},
			pay() {
				let that = this;
				if (!that.is_xy) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none',
						duration: 1000
					})
					return
				}
				that.jp_arr = []
				let info = {
					prize_num: that.prize_num,
					goods_id: that.goods_id,
					use_money_is: that.yue ? 1 : 2,
					use_integral_is: that.bi ? 1 : 2,
					coupon_id: that.coupon_info_s.coupon_id ? that.coupon_info_s.coupon_id : ''
				}
				if (that.pay_status) {
					return
				}
				that.req({
					url: 'infinite_orderbuy',
					data: info,
					success(res) {
						if (res.status == 1) {
							if (res.data.status == 1) {
								that.info = {}
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.res.timeStamp,
									nonceStr: res.data.res.nonceStr,
									package: res.data.res.package,
									signType: 'MD5',
									paySign: res.data.res.paySign,
									complete(ress) {
										if (ress.errMsg == 'requestPayment:fail cancel') {
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 1000
											})
										}
										if (ress.errMsg == 'requestPayment:ok') {
											uni.showToast({
												title: '支付成功',
												icon: 'none',
												duration: 1000
											})
											setTimeout(() => {
												that.$refs.order_show.close()
												that.req({
													url: 'prizeorderlog',
													data: {
														order_num: res.data.order_num
													},
													success(aa) {
														if (aa.status == 1) {
															that.jp_news = aa.data
																.user_info
															that.jp_arr = aa.data.data
															that.$refs.jp_show.open()
															that.loadData(1)
														}

													}
												})
											}, 1500)

										}
									}
								})
							} else {
								that.info = {}
								that.$refs.order_show.close()
								that.req({
									url: 'prizeorderlog',
									data: {
										order_num: res.data.order_num
									},
									success(aa) {
										if (aa.status == 1) {
											that.jp_news = aa.data.user_info
											that.jp_arr = aa.data.data
											that.$refs.jp_show.open()
											that.loadData(1)
										}

									}
								})
							}
						}
					}
				})
			},
			choujiang(e) {
				let that = this;
				that.req({
					url: 'coupon',
					data: {
						goods_id: that.goods_id,
						type: 1,
						num: e
					},
					success(res) {
						if (res.status == 1) {
							that.coupon_list = [];
							that.coupon_info_s = '';
							if (res.data.list.length > 0) {
								that.coupon_list = res.data.list;
								that.coupon_info_s = res.data.list[0];
							}
							that.prize_num = e
							that.order_money()
						}
					}
				})
			},
			order_money() {
				let that = this;
				that.req({
					url: 'infinite_ordermoney',
					Loading: true,
					data: {
						prize_num: that.prize_num,
						goods_id: that.goods_id,
						use_money_is: that.yue ? 1 : 2,
						use_integral_is: that.bi ? 1 : 2,
						coupon_id: that.coupon_info_s.coupon_id ? that.coupon_info_s.coupon_id : ''
					},
					success(res) {
						if (res.status == 1) {
							that.$refs.order_show.open()
							that.pay_news = res.data
						}
					}
				})
			},
			change_shang_id(e) {
				this.shang_id = e
				this.mescroll.resetUpScroll(false)
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(false)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.loadData(page.num);
			},
			loadData(pageNo) {
				let that = this;
				that.req({
					url: that.show == 0 ? 'infinite_goodsdetail' : that.show == 1 ? 'infinite_shang_log' : '',
					data: {
						page: pageNo,
						goods_id: that.goods_id,
						shang_id: that.shang_id
					},
					// Loading: true,
					success(res) {
						if (res.status == 1) {
							if (res.data.is_coupon == 2) {
								that.$refs.coupon.open();
							}
							if (that.show == 0) {
								that.goods = res.data.goods
								// setTimeout(()=>{
								that.order_list = res.data.bulletchat
								// },1000)
								that.shang_list = res.data.goodslist
								that.mescroll.endByPage(res.data.goodslist.length, 1);
								console.log(that.order_list)
							}
							if (that.show == 1) {
								that.shang_cate = res.data.category
								that.mescroll.endByPage(res.data.data.length, res.data.last_page);
								if (pageNo == 1) {
									that.jl_Arr = res.data.data;
								} else {
									that.jl_Arr = that.jl_Arr.concat(res.data.data);
								}
							}

						} else if (res.status == 0) {
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}

					}
				})
			},

		},

	}
</script>

<style lang="scss">
	.coupon {
		.coupon_list_title {
			display: flex;
			align-items: center;
			height: 89rpx;

			.jilvOrderTitle_text {
				flex: 1;
				text-align: center;
				margin-top: 20rpx;
				font-size: 40rpx;
				background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.ca {
				position: absolute;
				right: 20rpx;
			}
		}

		.coupon_img {
			image {
				width: 426rpx;
				height: 308rpx;
			}
		}

		.coupon_btn {
			text-align: center;

			image {
				width: 336rpx;
				height: 92rpx;
			}
		}

		.coupon_title {
			text-align: center;

			image {
				width: 430rpx;
				height: 124rpx;
				margin: 0 auto;
			}
		}

		.coupon_box,
		.coupon_list {
			width: 690rpx;
			height: 230rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin: auto;
			margin-bottom: 30rpx;

			.coupon_box_item,
			.item {
				padding: 20rpx;
				box-sizing: border-box;
				// border: 1px solid #5D5868;
				// background: linear-gradient(0deg, #2D2C4A 0%, #48495B 100%);
				border-radius: 10rpx;
				margin-bottom: 40rpx;

				.item_top {
					font-size: 28rpx;
					color: #FFFFFF;
					text-shadow: 0px 0px 11px rgba(49, 117, 255, 0.7);
					margin-bottom: 10rpx;
				}

				.item_box {
					display: flex;
					align-items: center;
					color: #FFFFFF;
					text-shadow: 0px 0px 11px rgba(49, 117, 255, 0.7);
				}

				.item_left {
					text-align: center;
					padding: 0 30rpx;
					flex: 0.3;

					// border-right: 1px dashed #CCCCCC;
					.left_num {
						font-size: 30rpx;

						text {
							font-size: 54rpx;
						}
					}

					.left_text {
						font-size: 20rpx;
					}
				}

				.xian {
					height: 80rpx;
					width: 1px;
					border-right: 1px solid #CCCCCC;
				}

				.item_center {
					flex: 1;
					margin-left: 20rpx;

					.center_title {
						font-size: 28rpx;
					}

					.center_time {
						font-size: 20rpx;
						margin-top: 20rpx;

						text {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

	.bomList {
		height: 950rpx;
		background-color: #09081C;

		.coupon_list {
			padding: 0;

			.item {
				margin-top: 20rpx;
			}
		}
	}




	page {
		height: 100%;
	}

	.shuoming_close {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.bomText {
		width: 360rpx;
		height: 68rpx;
		margin: auto;
		color: #FFFFFF;
		text-align: center;
	}

	.yulanStyle {
		width: 516rpx;
		font-size: 47rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}

	.shuomingOrder {
		width: 588rpx;
		height: 768rpx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 30rpx 30rpx 0px 0px;
		// border: 5rpx solid #FF7315;
		border-bottom: none;
		// position: absolute;
		// bottom: 0;
		padding: 10rpx 30rpx 50rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.pop_title {
		background: linear-gradient(0deg, #A98FD3 0%, #E7CBFF 50%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		font-weight: bold;
		margin-top: 75rpx;
	}

	.pop_con {
		max-height: 730rpx;
		margin: 10rpx auto;
		padding: 20rpx 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.shuoming_close {
		text-align: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}






	.header_news_b text {
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.header_news_b>image {
		width: 150rpx;
		height: 50rpx;
	}

	.header_news_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-style: italic;
		color: #DDDDDD;
	}

	.header_news_c {
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
		background: linear-gradient(0deg, #2D2C4A 0%, #48495B 100%);
		opacity: 0.45;
	}

	.redu_box {
		display: flex;
		align-items: center;
		background-color: rgba(#2D2C4A, 1);
		height: 88rpx;
	}

	.redu {
		/* width: 250rpx; */
		flex: 1;
		margin-left: 30rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
	}

	.redu_right {
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.redu>image {
		width: 46rpx;
		height: 46rpx;
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.more {
		font-size: 24rpx;
		margin-top: 30rpx;
		font-family: Source Han Sans CN;
	}

	.header_news_t_price>view:nth-of-type(1) {
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.header_news_t_price text {
		font-size: 22rpx;
	}

	.header_news_t_price {
		/* width: 250rpx; */
		/* border: 1rpx solid red; */
		font-family: zihun143hao;
		font-weight: 800;
		background: linear-gradient(0deg, #B07CDD 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-right: 30rpx;
		text-align: center;
		font-size: 24rpx;
		margin-left: 40rpx;
	}

	.shoucang {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 30rpx;

		.shoucang_img {
			display: flex;
			align-items: center;

			image {
				width: 101rpx;
				height: 30rpx;
			}
		}

		.shoucang_text {
			font-size: 28rpx;
			background: linear-gradient(0deg, #B07CDD 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 400;
		}
	}

	.riqi {
		/* width: 120rpx; */
		/* height: 80rpx; */
		/* border: 1rpx solid darkblue; */
		margin-top: 30rpx;
		/* -webkit-text-stroke: 2rpx #1A1A1A; */
		/* text-stroke: 2rpx #1A1A1A; */
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #CCCCCC;
	}

	// .header_news_t image:nth-of-type(2) {
	// 	width: 192rpx;
	// 	height: 88rpx;
	// }

	// .header_news_t image:nth-of-type(1) {
	// 	width: 168rpx;
	// 	height: 54rpx;
	// }

	.header_news_t {
		display: flex;
		/* justify-content: flex-end;*/
		height: 88rpx;
		align-items: center;
		margin-top: 24rpx;
	}

	.header_news {
		width: 750rpx;
		position: absolute;
		bottom: 0;
	}

	.header_news_a {
		position: absolute;
		right: 0;

		image {
			width: 146rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}

	.header_center>image:nth-of-type(3) {
		width: 153rpx;
		height: 74rpx;
		position: absolute;
		bottom: 300rpx;
		right: 0;
	}

	.header_center>image:nth-of-type(2) {
		width: 192rpx;
		height: 46rpx;
		position: absolute;
		bottom: 300rpx;
		left: 25rpx;
	}

	.header_center>image:nth-of-type(1) {
		width: 169rpx;
		height: 78rpx;
		position: absolute;
		bottom: 380rpx;
		right: 0;
	}

	.header_center {
		/* position: relative; */
		/* margin: 0rpx auto; */
	}

	.header_title>view:nth-of-type(2) {
		width: 520rpx;
		text-align: center;
		/* margin: auto; */
	}

	.header_title>view:nth-of-type(1) {
		display: flex;
		align-items: center;
	}

	.header_title image {
		width: 48rpx;
		height: 48rpx;
	}

	.header_title {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 20;
	}

	.header {
		width: 750rpx;
		height: 480rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 15;
	}

	.head_box {
		width: 750rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		top: 480rpx;
		z-index: 15;
		background-color: #09081C;
	}

	.bar_box>view {
		width: 166rpx;
		height: 87rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		padding-top: 44rpx;
		box-sizing: border-box;
	}

	.bar_box {
		width: 750rpx;
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.headimg {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.jilv_list_b>image {
		width: 22rpx;
		height: 19rpx;
	}

	.jilv_list_b {
		font-size: 20rpx;
		color: #999999;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.jilv_list_l>text {
		/* font-family: 'zcq'; */
		font-size: 28rpx;
		color: #A98FD3;
		margin-right: 10rpx;
	}

	.jilv_list_l>image:nth-of-type(1) {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.jilv_list_l {
		display: flex;
		align-items: center;
		flex: 7;
	}

	.jilv_list {
		width: 690rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.jilv_con {
		margin: 20rpx auto 0;
	}


	.jilv_title_sel {
		color: #A98FD3;
	}

	.jilv_title_view {
		color: #FFFFFF;
	}

	.jilv_title>view {
		border: 2rpx solid;
		width: 100rpx;
		height: 58rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text-shadow: 2rpx 2rpx 0px rgba(61, 24, 18, 0.6);
	}

	.jilv_title {
		color: rgba(255, 255, 255, 0.6);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.jilv {
		margin: 22rpx auto;
		width: 690rpx;
	}


	.list_img>view {
		font-size: 24rpx;
		position: absolute;
		background: #B07CDD;
		bottom: 0;
		left: 0;
		border-radius: 0 10rpx 0 0;
		text-align: left;
		padding: 0 20rpx 0 12rpx;
		box-sizing: border-box;
	}

	.list_img>image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
	}

	.list_img {
		width: 172rpx;
		height: 172rpx;
		border-radius: 10rpx;
		position: relative;
		border: 1px solid;
		box-shadow: 0px 0px 10rpx 0px #B07CDD;
	}



	.pop_jp {
		width: 750rpx;
		height: 942rpx;
		margin: auto;
		text-align: center;

		.jp_btn>view:nth-of-type(2) {
			// background: #B07CDD;
			border-radius: 10rpx;
		}

		.jp_btn>view:nth-of-type(1) {
			// border: 2rpx solid #B07CDD;
			border-radius: 10rpx;
		}

		.jp_btn_text text {
			background: linear-gradient(180deg, #B55AFF 0%, #E5C7FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.jp_btn>view {
			width: 230rpx;
			height: 68rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}

		.jp_btn {
			/* margin-top: 30rpx; */
			display: flex;
			justify-content: space-around;
		}

		.list_img>view {
			font-size: 24rpx;
			position: absolute;
			background: rgba(0, 0, 0, 0.8);
			bottom: 0;
			left: 0;
			border-radius: 0 20rpx 0 0;
			text-align: left;
			padding: 0 20rpx 0 12rpx;
			box-sizing: border-box;
		}

		.list_img_shang text {
			font-weight: bold;
			background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.list_title {
			background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.list_img>image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			margin: 20rpx;
		}

		.list_img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			position: relative;
			border: 1px solid;
			box-shadow: 0px 0px 10rpx 0px #B07CDD;
		}

		.jp_list {
			font-size: 24rpx;
			width: 200rpx;
			margin-top: 20rpx;
			position: relative;
		}

		.pop_gongxi {
			width: 430rpx;
			height: 124rpx;
			// position: absolute;
			// left: 0;
			// right: 0;
			// top: -212rpx;
			margin: 0 auto;
		}

		// .jp_title_1>view:nth-child(3n-1) {
		// 	margin: 20rpx 30rpx 0 30rpx;
		// }

		.jp_title_1 {
			width: 660rpx;
			height: 590rpx;
			overflow-y: scroll;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			margin: auto;
			color: #FFFFFF;
		}

		.jp_title {
			width: 690rpx;
			height: 620rpx;
			// padding: 0 40rpx;
			box-sizing: border-box;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			// padding-top: 180rpx;
			// padding-bottom: 100rpx;
			/* margin-top: 200rpx; */
		}

		.jp_name {
			/* font-family: 'zcq'; */
			font-size: 28rpx;
			color: #FFFFFF;
			/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
			position: absolute;
			top: 104rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 13;
		}

		.jp_headimg>image {
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
		}

		.jp_headimg {
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
			border: 1px solid #B07CDD;
			position: absolute;
			top: -26rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 12;
		}
	}







	.fangshi text {
		color: #B07CDD;
	}

	.fangshi>view>image {
		margin-right: 20rpx;
	}

	.fangshi image {
		width: 40rpx;
		height: 40rpx;
	}

	.fangshi {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 60rpx;
		align-items: center;
	}

	.zhifu {
		width: 252rpx;
		height: 67rpx;
		background: #B07CDD;
		border-radius: 7rpx;
		font-size: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_desc {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.order_bottom {
		height: env(safe-area-inset-bottom);
	}

	.order_title_btn {
		width: 690rpx;
		height: 98rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.order_num text {
		font-size: 32rpx;
		color: #B07CDD;
	}

	.order_num>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.order_num {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #333333;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.order_pic>view>view:nth-of-type(3) {
		display: flex;
		justify-content: space-between;
		width: 410rpx;
	}

	.order_pic>view:nth-of-type(2) {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.order_pic_img>image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}

	.order_pic_img {
		width: 188rpx;
		height: 188rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order_pic {
		display: flex;
	}

	.order_title_con1 {
		width: 690rpx;
		margin: auto;
		background: #090909;
		border: 2rpx solid #B07CDD;
		border-radius: 17rpx;
		margin-top: 28rpx;
		padding: 20rpx 30rpx 10rpx;
		box-sizing: border-box;

		.order_coupon {
			display: flex;
			align-items: center;

			.coupon_text {
				flex: 1;
			}

			.coupon_money {
				color: #B07CDD;
			}
		}
	}

	.order_title>image {
		width: 275rpx;
		height: 88rpx;
		position: absolute;
		left: 30rpx;
		top: -44rpx;
	}

	.jilvOrderTitle {
		display: flex;
		align-items: center;
		height: 89rpx;

		.jilvOrderTitle_text {
			flex: 1;
			text-align: center;
			margin-top: 20rpx;
			font-size: 40rpx;
			background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.ca {
			position: absolute;
			right: 20rpx;
		}
	}

	.order_title {
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		position: relative;
		text-align: right;
	}

	.order {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.9);
		border-radius: 30rpx 30rpx 0px 0px;
		// border: 5rpx solid #FF7315;
		border-bottom: none;
		position: absolute;
		bottom: 0;
		// padding: 10rpx 30rpx 50rpx;
		box-sizing: border-box;
		color: #FFFFFF;
	}



	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
	}

	.xuanfu image {
		width: 77rpx;
		height: 77rpx;
		margin-top: 20rpx;
	}

	.xuanfu {
		position: fixed;
		bottom: 391rpx;
		right: 20rpx;
		width: 77rpx;
		z-index: 21;
	}

	.qiehuan {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		margin-top: 20rpx;
	}

	.qiehuan_line {
		margin-top: -10rpx;
	}

	.qiehuan_line>image {
		width: 40rpx;
		height: 20rpx;
	}

	.qiehuan>view {
		flex: 1;
		text-align: center;
	}

	.wzs {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.4);
	}

	.xzs {
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.lunbo_r image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}

	.lunbo_r>view:nth-of-type(1) {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #BC9FFF;
	}

	.lunbo_r {
		font-size: 24rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		color: #FFFFFF;
	}

	.lunbo>image:nth-of-type(1) {
		width: 132rpx;
		height: 132rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.lunbo {
		display: flex;
		align-items: center;
		height: 172rpx;
		margin-left: 20rpx;
	}

	.zmd {
		width: 630rpx;
		height: 172rpx;
		margin: 20rpx auto;
		margin-top: 588rpx;
		padding: 0 30rpx;
	}

	.goods_v {
		width: 690rpx;
		height: 290rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid #B07CDD;
		border-radius: 10rpx;
		margin: 20rpx auto;
		position: relative;
		display: flex;
	}

	.goods_v_1 {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
	}

	.gmsm {
		width: 147rpx;
		height: 34rpx;
	}

	.goods_v_2_top {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.goods_v_2_top>image {
		width: 40rpx;
		height: 40rpx;
	}


	.goods_v_2 {
		box-sizing: border-box;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 370rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods_v_2>.hang2 {
		height: 80rpx;
		font-size: 28rpx;
	}

	.goods_v_2>.flex_center {
		justify-content: space-between;
	}

	.jiaqian {
		font-size: 24rpx;
		color: #B07CDD;
		text-shadow: 0px 0px 14rpx #B07CDD;
	}

	.goods_v_2>image {
		width: 119rpx;
		height: 25rpx;
	}

	.goods_v_2 text {
		font-size: 40rpx;
		margin: 0 2rpx;
	}

	.redu {
		width: 250rpx;
		height: 46rpx;
		/* overflow: hidden; */
	}

	.redu>image {
		width: 46rpx;
		height: 46rpx;
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.content {
		padding-bottom: 200rpx;
		background: #09081C;
		padding-top: 1rpx;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.sangs {
		font-size: 24rpx;
		margin: 6rpx 0;
	}

	.sp_head>text {
		font-size: 24rpx;
		color: #333333;
	}

	.sp_shang>image {
		width: 25rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}

	.sp_shang {
		color: transparent;
		/* background: linear-gradient(90deg, #A3BFFF 0%, #9FE5CF 35%, #FFD1AF 72%, #FFB8C9 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		/* font-family: 'zcq'; */
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-right: 6rpx;
	}

	.sp_head {
		font-size: 20rpx;
	}

	.sp {
		width: 690rpx;
		background: #181936;
		border-image: linear-gradient(0deg, #5D5868, #92949A) 10 10;
		border: 2rpx solid;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.spt>view {
		width: 166rpx;
		margin-right: 25rpx;
		flex-shrink: 0;
	}

	.spt {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.imgs {
		width: 168rpx;
		height: 168rpx;
		border-radius: 8rpx;
		display: flex;
	}

	.list_img>view {
		/* font-family: 'zcq'; */
		font-size: 24rpx;
		position: absolute;
		width: 100%;
		height: 34rpx;
		background: rgba(0, 0, 0, 0.8);
		bottom: 0;
		left: 0;
		border-radius: 0 0 10rpx 10rpx;
		text-align: left;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.list_img>image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
	}

	.list_img {
		width: 176rpx;
		height: 176rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		position: relative;
	}

	.spbox {
		width: 690rpx;
		margin: 22rpx auto 0;
	}

	.sang:nth-child(1) {
		margin-left: 20rpx;
	}
</style>